import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './governmentModule.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import rightIcon from '@/assets/image/index/right.png';
import gov_1Bg from '@/assets/image/indexPage/gov_1.png';
import gov_2Bg from '@/assets/image/indexPage/gov_2.png';
import gov_3Bg from '@/assets/image/indexPage/gov_3.png';
import gov_4Bg from '@/assets/image/indexPage/gov_4.png';
type IGovProps = T.IProps & T.IGovProps;
//@ts-ignore
@connect<Partial<IGovProps>, T.IGovState>(store2Props, actions)
export default class Info extends Component<Partial<IGovProps>, T.IGovState> {
  constructor(props: IGovProps) {
    super(props);
  }

  renderItem(list) {
    let ViewItem = [];
    if (list.length == 0) {
      return;
    }
    list.map((item, index) => {
      let viewClassName =
        item.name == '微心愿'
          ? 'bgImage1'
          : item.name == '江北民生'
          ? 'bgImage2'
          : item.name == '食安江北'
          ? 'bgImage3'
          : 'bgImage4';
      let viewBackGround =
        item.name == '微心愿'
          ? gov_1Bg
          : item.name == '江北民生'
          ? gov_2Bg
          : item.name == '食安江北'
          ? gov_3Bg
          : gov_4Bg;
      ViewItem.push(
        <View
          className="i_box"
          onClick={() => {
            Taro.setStorageSync('url', item.router);
            Taro.navigateTo({
              url: '/pages/package-A/webview/index',
            });
          }}
        >
          <View className={viewClassName} style={{backgroundImage: `url(${viewBackGround})`}}>
            <Text className="b_title1">{item.name}</Text>
            <Text className="b_title2">{item.appDesc}</Text>
          </View>
        </View>,
      );
    });
    return ViewItem;
  }

  render() {
    let {
      main: {ascList},
      actions: {action},
    } = this.props;
    return (
      ascList.length > 0 && (
        <View className="PageIndexGovernment">
          <View className="content">
            {/* <Image className='b_bg' mode="widthFix" src={bgIcon} /> */}
            <View
              className="t_box"
              onClick={(e) => {
                e.stopPropagation();
                Taro.navigateTo({
                  url: `/pages/package-A/gov-service/index`,
                });
              }}
            >
              <View className="row">
                {/* <View
                style={{
                  height: '16px',
                  width: '5px',
                  backgroundColor: '#218CFF',
                  marginRight: '10px',
                }}></View> */}
                <Text className="l_title">政务服务</Text>
              </View>
              <View className="row" style={{justifyContent: 'center'}}>
                <Text className="more">更多</Text>
                <View style={{alignContent: 'center', justifyContent: 'center'}}>
                  <Image className="r_img" mode="widthFix" src={rightIcon} />
                </View>
              </View>
            </View>
            <View className="b_box">{this.renderItem(ascList)}</View>
          </View>
        </View>
      )
    );
  }
}

//create by moon https://github.com/creasy2010/moon
